@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);


* {
  font-family: "Noto Sans KR", sans-serif;
}
a {
  text-decoration: none;
  white-space: nowrap;
}
.offcanvas {
  padding: 1.25rem 0;
}
.navbar-right {
  flex-direction: column-reverse;
  flex-wrap: wrap;
  align-content: flex-end;
}
.brand {
  /* margin-top: 1rem; */
}
.bg-cyan {
  color: #00bcf1;
}
.bg-skyblue {
  background-color: #F3FCFE;
}
.text-dark-primary {
  color:#036ec9;
}
.text-cobalt {
  color:#344881;
}
.bg-cobalt {
  background-color:#344881;
}
.video-frame {
  width: 100%;
  margin: 1.5rem 0;
  aspect-ratio: 16/9;
}
button.btn-close,
button.navbar-toggler {
  font-size: 1rem;
  transform: scale(0.75, 1);
  
  border: 2px solid #000000;
  border-radius: 50%;
  /* margin-top: 1rem; */
  /* outline: none; */
  /* border-radius: 0; */
  &:hover {
    /* background-color: blue; */
    box-shadow: 0 0 4px #000;
    text-shadow: 0 0 4px #000;
  }
  &:focus {
    box-shadow: none;
  }
  &.text-reset {
    transform: scale(1);
    margin-right: 0.5rem;
  }
}
.invert-filter {
  filter: invert(100%);
  &:hover {
    filter: invert(100%) brightness(4);
    background-color: #fff;
    box-shadow: 0 0 8px #fefef2;
    text-shadow: 0 0 8px #fefef2;
  }
}
body {
  margin: 0;
}

body.home {
  position: relative;
  background: #000;
  background-image: url('../img/home.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.back-image {
  width: 100%;
  background: url('../img/home.png');
  background-size: 100%;

}
.side-bg {
  background: #012c58e3;
  backdrop-filter: blur(4px);
}
header {
  padding: 1.5rem 0.25rem;
  /* background: red; */
 .header-body {
   margin: 0 auto;
   max-width: 1280px;
  }
  &.sub-header {
    padding: 0 1rem;
    background-color: #127ca9;    ;
    color: #fefefe;
    .header-body {
      padding: 1.5rem 0.25rem;
      background-image: url('../img/header.png');
      background-size: 1000px;
      background-position: right;
      background-repeat: no-repeat;
      height: 225px;
      h1 {
        font-size: 6rem;
        font-weight: 900;
      }
      p {
        font-size: 1.5rem;
      }
    }
  }
}
/* .brand a {
  font-size: 1.5rem;
  font-weight: 700;
  color: #eee;
} */

img.logo-200 {
  width: 200px;
}
img.logo-125 {
  width: 125px;
}
.whiten {
    filter: invert(50%) brightness(2);
}
.max-width-container {
  max-width: 1280px;
  margin: 0 auto;
  /* padding: 0; */
}
.home {
  a.nav-link {
    color: #eee !important;
  }  
}
a.nav-link {
  font-weight: 600 !important;
  padding: 0.25rem 0.75rem;
  /* color: #eee; */
}
ul.wide a.nav-link {
  margin-inline: 0.25rem;
  border-top:3px solid transparent;
  &.active,
  &:hover {
    /* text-shadow: 0 0 2px #a9c411; */
    border-top:3px solid;
  }
}
ul.narrow a.nav-link {
  margin-block: 0.25rem;
  border-left:3px solid transparent;
  &.active,
  &:hover {
    /* text-shadow: 0 0 2px #a9c411; */
    border-left:3px solid;
  }
}

main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem;
  /* index */
  &.home {
    h1 {
      padding: 9rem 2.5rem;
      font-size: 4rem;
      color: #eee;
      font-weight: 900;
    }
    p {
      text-align: right;
      padding: 4.5rem 2.5rem;
      margin-left: 10rem;
      font-size: 1.75rem;
      color: #eee;
    }
  }
  /* about */
  &.about {
    .m-auto {
      width: 80%;
    }
    .what {
      padding: 4.5rem;
      background-size: 100%;
      background-repeat: no-repeat;
      color: #fefefe;
      margin-bottom: 1rem;
      h1 {
        font-size: 3rem;
        font-weight: 900;
      }
      h2 {
        margin-top: 11rem;
        font-weight: 900;
      }
      p {
        width: 75%;
        font-size: 1.25rem;
      }

      &.fuelcelldr {
        color: #111;
        min-height: 270px;
        padding: 1.75rem;
      }
      &.stack-monitoring {
        /* background-position: top; */
        background-color: #00b0f0;
        /* background-color: #000; */
        background-image: url('../img/about-1.png');
      }
      &.soft-sensing {
        background-color: #105ac0;
        background-image: url('../img/about-2.png');
        h1,h2,p {
          text-align: right;
        }
        p {
          transform: translateX(33.5%);
        }
      }
      &.saas {
        background-color: #283770;
        background-image: url('../img/about-3.png');
      }
    }
  }
  /* solution */
  &.solution {
    color: black !important;
    .m-auto {
      width: 80%;
    }
    .what {
      padding: 0.0rem 4.5rem;
      background-size: 100%;
      background-repeat: no-repeat;
      /* color: #fefefe; */
      margin-bottom: 1rem;
      .skyblue {
        background-color: #F3FCFE;
      }
      ul {
        list-style: square;
        font-weight: 600;
      }
      h1 {
        font-size: 3rem;
        margin: 2rem 0;
        font-weight: 900;
      }
      h2 {
        margin: 1rem 0;
        font-weight: 900;
      }
      h3 {
        margin: 1rem 0;
        font-weight: 900;
      }
      p {
        font-size: 1rem;
        font-weight: 600;
      }
      figure.bg-skyblue {
        position: relative;
        height: 400px;
        figcaption {
          position: absolute;
          padding: 1rem;
          ul {
            padding-top: 2rem;
          }
        }
        p {
          position: absolute;
          bottom: 1rem;
          padding: 0 2rem;

        }
      }
      
      img[alt='Stack Impedance Scanning'] {
        width: 70%;
        padding: 1rem;
        float: right;
      }
      img[alt='FuelCellDr'] {
        width: 60%;
        padding: 1rem;
        float: right;
      }
      .deco-1::before {
        display: inline-block;
        content: url('../img/solution-deco-1.jpg');
        /* width: 50%; */
        padding-right: 1rem;
        vertical-align: middle;
      }
      .capsule {
        display: inline-block;
        border: 1px solid #036ec9;
        border-radius: 4rem;
        text-align: center;
        width: 50%;
        min-width: 320px;
        margin-right: -1rem;
        p {
          margin-top: -0.75rem;
        }
        /* float: left; */
        &:last-child {
          margin-right: 0;
          margin-left: -1rem;
        }
      }
      .graph {
        margin-right: 3.5rem;
      }
      .badge {
        width: 8rem;
        border-radius: 4rem;
        padding: 0.5rem 1.5rem;
        h3 {
          margin: 0;
          font-weight: 600;
        }
      }
      &.fuelcelldr {
        color: #111;
        min-height: 270px;
        padding: 1.75rem;
      }
      &.stack-monitoring {
        /* background-position: top; */
        background-color: #00b0f0;
        /* background-color: #000; */
        background-image: url('../img/about-1.png');
      }
      &.soft-sensing {
        background-color: #105ac0;
        background-image: url('../img/about-2.png');
        h1,h2,p {
          text-align: right;
        }
        p {
          transform: translateX(33.5%);
        }
      }
      &.saas {
        background-color: #283770;
        background-image: url('../img/about-3.png');
      }
    }
  }
  /* contact */
  &.contact {
    .input-section {
      width: 80%;
      max-width: 1000px;
      margin: 0 auto;
    }
    .submit-group {
      height: 40px;
    }
    .inner-content {
      position: relative;
      display: block;
      background: #fff;
      padding: 2rem 2.5rem;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
      margin-bottom: 2rem;
      &:last-child {
        margin-bottom: 0;
      }
      .date-col {
        position: absolute;
        top: 1rem;
        right: 1.5rem;
        font-size: 0.9rem;
        color: #666;
        font-weight: 500;
        z-index: 1;
      }
      .announcement-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: #333;
        text-align: center;
      }
      h5 {
        font-size: 1.2rem;
        font-weight: 700;
        margin: 1rem 0;
        line-height: 1.6;
        color: #000;
        text-align: center;
      }
      hr {
        margin: 1.25rem 0;
        border: 0;
        border-top: 1px solid #ddd;
      }
      p {
        font-size: 0.95rem;
        line-height: 1.8;
        color: #333;
        margin-bottom: 1rem;
        text-align: justify;
        &.text-right {
          margin-top: 1.5rem;
          margin-bottom: 0;
          text-align: right;
        }
      }
      .etc {
        font-size: 0.9rem;
        line-height: 1.8;
        color: #333;
        margin-top: 1rem;
      }
    }
  }
}
.big-link {
  .big-link-body {
    max-width: 1280px;
    margin: 0 auto;
    button {
      position: relative;
      background: #00253cdd;
      border: none;
      font-size: 2rem;
      font-weight: 600;
      width: calc(100% - 4rem);
      padding: 4rem;
      color: #eee;
      text-align: left;
      line-height: 3;
      margin: 1.5rem 2rem;
      &:hover {
        background-color: #0f79bbdd;
        .with-bracket::after {
          color: #4bb5f8;
        }
      }
      .with-bracket::after {
        background-color: #eee;
        float: right;
        color: #0f79bbdd;
        font-size: 4rem;
        content: "❯";
        line-height: 1.4;
        border: 1px solid #000;
        width: 6rem;
        height: 6rem;
        border-radius: 3rem;
        text-align: center;
      }
    }
  }
}
footer {
  background-color: #008db6;
  .footer-body {
    font-size: 0.8rem;
    padding: 1.5rem;
    max-width: 1280px;
    margin: 0 auto;
    color: #eee;
    address {
      margin: 0.25rem 0;
    }
    a {
      color: #eee;
    }
    span.contact {
      display: inline-block;
      width: 2rem;
      padding-right: 1rem;
      font-weight: 700;
      text-align: center;
      
    }
    .rights{
      font-size: 0.75rem;
      opacity: 0.8;
    }
  }
}
@media (max-width: 992px) {
  
  body {
    /* background-image: none !important; */
    /* background-color: red !important; */
  }
  .video-frame {
    width: calc(100% + 6rem);
    margin: 1.5rem -3rem;
    aspect-ratio: 16/9;
  }
  main {
    &.home {
      h1 {
        padding: 1rem 1rem;
        font-size: 2.5rem;
        color: #eee;
        font-weight: 900;
        text-align: right;
      }
      p {
        padding: 0.5rem 0.5rem;
        margin-left: 0;
        font-size: 1.5rem;
        color: #eee;
        line-height: 1.75rem;
        text-align: left;
      }
    }
    &.about {
      .m-auto {
        width: 100%;
      }
      .what {
        padding: 2.5rem;
        background-size: 100%;
        background-repeat: no-repeat;
        color: #fefefe;
        margin-bottom: 1rem;
        h1 {
          font-size: 2.5rem;
          font-weight: 900;
        }
        h2 {
          font-size: 1.5rem;
          margin-top: 7rem;
          font-weight: 900;
        }
        p {
          font-size: 1rem;
          width: 100%;
        }
  
        &.fuelcelldr {
          color: #111;
          min-height: 270px;
          padding: 1.75rem;
        }
        &.stack-monitoring {
          /* background-position: top; */
          background-color: #00b0f0;
          /* background-color: #000; */
          background-image: url('../img/about-1.png');
        }
        &.soft-sensing {
          background-color: #105ac0;
          background-image: url('../img/about-2.png');
          h1,h2,p {
            text-align: right;
          }
          p {
            transform: translateX(0);
          }
        }
        &.saas {
          background-color: #283770;
          background-image: url('../img/about-3.png');
        }
      }
    }
    &.solution {
      color: black !important;
      .m-auto {
        width: 80%;
      }
      .what {
        padding: 0.0rem 0.25rem;
        background-size: 100%;
        background-repeat: no-repeat;
        /* color: #fefefe; */
        margin-bottom: 1rem;

        ul {
          list-style: square;
          font-weight: 600;
          font-size: 0.75rem;
        }
        h1 {
          font-size: 2rem;
          margin: 2rem 0;
          font-weight: 900;
        }
        h2 {
          font-size: 1.25rem;
          margin: 1rem 0;
          font-weight: 900;
        }
        h3 {
          margin: 1rem 0;
          font-weight: 900;
        }
        p {
          font-size: 1rem;
          font-weight: 600;
          padding: 1.5rem 0 0;
        }
        figure.bg-skyblue {
          position: relative;
          height: 550px;
          figcaption {
            position: relative;
            padding: 1rem;
            ul {
              padding-top: 3rem;
            }
          }
          &.second {
            height: 400px;
            ul {
              padding-top: 3rem;
            }
          }
          p {
            font-size: 0.75rem;
            position: relative;
            bottom: 1rem;
            padding: 0 2rem;
            }
      
        }
        
        img[alt='Stack Impedance Scanning'] {
          width: 100%;
          padding: 0.5rem;
          /* float: right; */
        }
        img[alt='FuelCellDr'] {
          width: 100%;
          padding: 0.5rem;
          /* float: right; */
        }
        .deco-1::before {
          display: inline-block;
          content: url('../img/solution-deco-1.jpg');
          /* transform: scale(0.5); */
          /* width: 15px; */

          padding-right: 1rem;
          vertical-align: middle;
        }
        .capsule {
          display: block;
          border: 1px solid #036ec9;
          border-radius: 4rem;
          text-align: center;
          width: 100%;
          min-width: fit-content;
          margin: 0;
          padding: 1rem 0;

          h3 {
            display: inline-block;
            font-size: 1rem;
            padding: 0;
            margin: 0;
            
          }
          p {
            /* display: inline-block; */
            font-size: 0.75rem;
            margin: 0;
          }
          /* float: left; */
          &:last-child {
            margin-right: 0;
            margin-left: 0;
            margin-top: -0.5rem;
          }
        }
        .graph {
          margin-right: 0;
          transform: scale(1.3);
        }
        .badge {
          width: 8rem;
          border-radius: 4rem;
          padding: 0.5rem 1.5rem;
          margin-bottom: 0.25rem;
          h3 {
            font-size: 1rem;
            margin: 0;
            font-weight: 600;
          }
        }
        &.fuelcelldr {
          color: #111;
          min-height: 270px;
          padding: 1.75rem;
        }
        &.stack-monitoring {
          /* background-position: top; */
          background-color: #00b0f0;
          /* background-color: #000; */
          background-image: url('../img/about-1.png');
        }
        &.soft-sensing {
          background-color: #105ac0;
          background-image: url('../img/about-2.png');
          h1,h2,p {
            text-align: right;
          }
          p {
            transform: translateX(33.5%);
          }
        }
        &.saas {
          background-color: #283770;
          background-image: url('../img/about-3.png');
        }
      }
    }
    &.contact {
      .input-section {
        width: 95%;
        max-width: 100%;
      }
      .inner-content {
        padding: 1.5rem 2rem;
        margin-bottom: 1.5rem;
        &:last-child {
          margin-bottom: 0;
        }
        .date-col {
          position: relative;
          top: 0;
          right: 0;
          text-align: right;
          margin-bottom: 0.75rem;
        }
        .announcement-title {
          font-size: 0.95rem;
          margin-bottom: 0.75rem;
          text-align: center;
        }
        h5 {
          font-size: 1.1rem;
          line-height: 1.5;
          margin: 0.75rem 0;
          text-align: center;
        }
        hr {
          margin: 1rem 0;
        }
        p {
          font-size: 0.9rem;
          line-height: 1.7;
          margin-bottom: 0.75rem;
          &.text-right {
            margin-top: 1rem;
            margin-bottom: 0;
            text-align: right;
          }
        }
        .etc {
          font-size: 0.85rem;
          margin-top: 0.75rem;
        }
      }
    }
  }
  .big-link {
    .big-link-body {
        button {
          font-size: 1.5rem;
          padding: 2.25rem;
          color: #eee;
          line-height: 3;
          margin: 1.0rem 2rem;
          .with-bracket::after {
            background: #eee;
            font-size: 3rem;
            width: 4.25rem;
            height: 4.25rem;
            border-radius: 4.125rem;
        }
      }
    }
  }
  header {
    padding: 1.5rem 0.25rem;
    /* background: red; */
   .header-body {
     margin: 0 auto;
     max-width: 1280px;
    }
    &.sub-header {
      padding: 0;
      background-color: #127ca9;    ;
      color: #fefefe;
      .header-body {
        padding: 0.75rem 1rem;
        background-image: url('../img/header.png');
        background-size: 500px;
        background-position: right;
        background-repeat: no-repeat;
        height: 110px;
        h1 {
          font-size: 2.5rem;
          font-weight: 900;
        }
        p {
          font-size: 1.25rem;
        }
      }
    }
  }
}
@media (max-width: 768px) {
  figure.bg-skyblue {
    position: relative;
    height: 500px !important;
    &.second {
      height: 400px !important;
    }
  }
}
@media (max-width: 425px) {
  figure.bg-skyblue {
    position: relative;
    height: 300px !important;
    &.second {
      height: 400px !important;
    }

  }
}